<template>
  <div class="header">
    <!-- 头部顶部 -->
    <div class="header_center">
      <div class="header_top">
        <!-- 左边栏 -->
        <div class="header_top_left">

          <template v-if="Uname==null">
            <a href="javascript:;" @click="Login()" id="color1">登录</a>
            <span>|</span>
            <a href="javascript:;" id="color2" @click="testToken()">免费注册</a>
            <span>|</span>
          </template>

          <template v-else >
            <a href="javascript:;" id="color1">欢迎{{Uname}}</a>
            <span>|</span>
            <a href=""  @click="UpdateName(null)" id="color2">退出</a>
            <span>|</span>
          </template>
          
          <a href="javascript:;" @click="myDetail">我的SN</a>
        </div>
        <!-- 登陆界面 -->
        <div id="bg" v-show="show"></div>

        <div v-show="show" class="login">
          <div class="login_left">
            <div>
              <img src="@/assets/img/login/login.jpg" alt="" />
            </div>
            <div class="login_content">
              <span></span>
              <em></em>
              注册即享受双重好礼
              <em></em>
              <span></span>
              <ul>
                <li>
                  <img src="@/assets/img/login/minus.png" alt="" />
                  <p>新用户首日立减100元</p>
                </li>
                <li>
                  <img src="@/assets/img/login/minus2.png" alt="" />
                  <p>租一送一租车卷</p>
                </li>
              </ul>
            </div>
          </div>
          <div ref="fat" class="login_right" v-show="test">
            <span @click="Login()"></span>
            <h4>普通登录</h4>
            <!-- <ul>
              <li @click="loginName = 'VipLogin'">快速登录</li>
              <li @click="loginName = 'CommentLogin'">普通登录</li>
            </ul> -->
            <!-- 登录界面数据 -->
            <div class="comment_login">
              <input
                type="text"
                v-model="LoginuserEmail"
                placeholder="请输入用户名/手机号/邮箱"
              />
              <input
                type="password"
                v-model="LoginuserPwd"
                placeholder="请输入密码"
              />
              <div class="comment_forget">
                <a href="javascript:;">忘记密码?</a>
              </div>

              <div class="login_btn">
                <a href="javascript:;" @click="doLogin()"> 登录</a>
              </div>
              <div class="login_bottom">
                您可以用手机直接访问 &nbsp;&nbsp;<a>m.sn.cn</a>
              </div>
            </div>

            <div class="login_text">
              还没注册？
              <a @click="reg()">立即注册></a>
            </div>
          </div>
          <!-- 注册页面 -->
          <div v-show="!test" class="register_rgiht">
            <div class="register_center">
               <span @click="Login()" id="quite"> </span>
              <h3>新用户注册</h3>
              <input
                type="text"
                @blur="checkPhone"
                v-model="userEmail"
                placeholder="请输入邮箱号"
              />
              <img
                v-show="showEmail"
                id="email"
                src="/image/error.png"
                alt=""
              />
              <input
                type="text"
                v-model="userCode"
                placeholder="请输入邮箱验证码"
                @blur="checkRepeatCode()"
              />
              <img
                v-show="repeatCode"
                id="repeatCode"
                src="/image/error.png"
                alt=""
              />
              <a
                id="code"
                href="javascript:;"
                @click="sendCode"
                v-show="showCode"
                >获取验证码</a
              >
              <a href="javascript:;" id="codetime" v-show="!showCode"
                >{{ count }}s后再发送</a
              >
              <!-- {{count}}s后再发送 -->
              <input
                type="password"
                v-model="userPwd"
                placeholder="密码需要6-18位"
                @blur="checkPwd"
              />
              <img
                v-show="showPwd"
                id="error_pwd"
                src="/image/error.png"
                alt=""
              />
              <div class="register_msg">
                <input type="checkbox" @change="changeBox" />
                我已阅读并同意
                <span>《赛男租车会员注册协议》</span>和
                <span>《赛男租车隐私政策》</span>
              </div>
              <button @click="doReg()">立即注册</button>
              <a>已有账号</a>,<a id="aaaa" @click="reg()">点击登录></a>
              <div class="register_bottom">
                您可以用手机直接访问 &nbsp;&nbsp;<a id="aaaa">m.sn.cn</a>
              </div>
            </div>
          </div>
        </div>

        <!-- 右边栏 -->
        <div class="header_top_right">
          <a href="javascript:;">帮助中心</a>
          <span>|</span>
          <div class="header_change">
            <a href="javascript:;">网站导航</a>
            <img src="@/assets/img/header/右.png" alt="" />
          </div>
          <span>|</span>
          <a href="javascript:;">English</a>
          <span>|</span>
          <div class="phone">
            <a href="javascript:;" id="color3">886-8008-6886</a>
            <img src="../assets/img/header/右.png" alt="" />
          </div>
          <span>|</span>
          <a href="javascript:;">微信</a>
        </div>
      </div>
    </div>

    <div class="logo">
      <img src="../assets/img/logo.png" alt="" />
    </div>
    <!-- 头部底部 -->
    <div class="header_bottom">
      <ul>
        <li :class="{ cur: this.$route.name == 'Index' }">
          <router-link to="/">首页</router-link>
        </li>
        <li><a href="javascript:;">自驾租车</a></li>
        <li>
          <a href="javascript:;"
            >自驾游 <em><img src="../assets/img/header/new.png" alt="" /></em
          ></a>
        </li>
        <li :class="{ cur: this.$route.name == 'CartSearch' }">
          <router-link to="/cartsearch">车型查询</router-link>
        </li>
        <li><a href="javascript:;">营业网点</a></li>
        <li><a href="javascript:;">政企服务</a></li>
        <li><a href="javascript:;">接送服务</a></li>
        <li><a href="javascript:;">精彩活动</a></li>
      </ul>
    </div>
  </div>
</template>

<script>
import VipLogin from "../components/VipLogin.vue";
import CommentLogin from "../components/CommentLogin.vue";
import Register from "../components/Register.vue";
import {mapState,mapMutations} from 'vuex'
export default {
  components: { VipLogin, CommentLogin, Register },
  data() {
    return {
      test: true,
      show: false,
      loginName: "CommentLogin",
      index: 0,
      userEmail: "",
      userCode: "",
      userPwd: "",
      showEmail: false,
      timer: null,
      count: "",
      showCode: true,
      showPwd: false,
      repeatCode: false,
      // 登录界面数据
      LoginuserEmail: "",
      LoginuserPwd: "",
      // 显示用户名
      // showUserName: "",
    };
  },
  mounted () {
    // console.log(this.Uname);
  },
  methods: {
    // 验证验证码是否正确
    checkRepeatCode() {
      if (!this.userCode) {
        this.repeatCode = false;
        return;
      }
      // console.log('验证邮箱码')
      let params = `code=${this.userCode}`;
      this.axios.post(`/user/repeatcode`, params).then((res) => {
        // console.log(res)
        if (res.data.code == 200) {
          // 验证码正确
          this.repeatCode = false;
        } else {
          this.repeatCode = true;
        }
      });
    },
    // 验证邮箱是否已经被注册过
    checkRepeatEmail(value) {
      let email = `user_email=${value}`;
      this.axios.post("/user/repeatemail", email).then((res) => {
        // console.log(res);
        if (res.data.code == 200) {
          this.showEmail = false;
        } else {
          this.showEmail = true;
          // alert('邮箱号已经被注册!')
        }
      });
    },
    // 验证密码
    checkPwd() {
      let pwd = this.userPwd.trim();
      if (!pwd) {
        this.showPwd = false;
        return;
      }
      // console.log(pwd)
      //密码由数字和字符组成至少6位
      let reg = /^[0-9A-Za-z]{6,}$/;
      if (reg.test(pwd)) {
        this.showPwd = false;
        // console.log("密码格式正确");
      } else {
        // console.log("密码格式错误");
        this.showPwd = true;
      }
    },
    // 发送验证码
    sendCode() {
      // 如果邮箱号为空不能发送验证码
      let reg = /^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;
      if (!reg.test(this.userEmail.trim())) return;
      let params = `email=${this.userEmail}`;
      this.axios.get(`/user/getcode?${params}`).then((res) => {
        // console.log(res);
      });
      //60倒计时
      const time_count = 60;
      // this.showCode=false
      if (!this.timer) {
        this.count = time_count;
        this.showCode = false;
        this.timer = setInterval(() => {
          if (this.count > 0 && this.count <= time_count) {
            this.count--;
          } else {
            this.showCode = true;
            clearInterval(this.timer);
            this.timer = null;
          }
        }, 1000);
      }
    },
    // 检查邮箱号格式是否正确
    checkPhone() {
      let phone = this.userEmail.trim();
      if (!phone) {
        this.showEmail = false;
        return;
      }
      // console.log("检测邮箱号");
      // 验证邮箱格式是否正确
      let reg = /^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;
      if (reg.test(phone)) {
        // console.log("邮箱号正确");
        this.showEmail = false;
        this.checkRepeatEmail(phone);
      } else {
        // console.log("邮箱号错误");
        this.showEmail = true;
      }
    },
    // 是否同意注册协议
    changeBox(e) {
      console.log(e.target.checked);
      // return e.target.checked;
    },
    // 注册
    doReg() {
      if (this.userEmail && this.userCode && this.userPwd) {
        // console.log(this.userEmail, this.userCode);
        let params = `user_email=${this.userEmail}&user_pwd=${this.userPwd}`;
        this.axios.post("/user/register", params).then((res) => {
          // console.log(res);
          // 接收返回值 判断是否注册成功
          if (res.data.code == 200) {
            // 注册成功
            // console.log("注册成功，跳转到登录界面....");
            this.$router.push('/')
          } else {
            alert(res.data.msg);
          }
        });
      } else {
        // console.log("不能为空");
      }
    },
    // 登录
    ...mapMutations(['UpdateName']),  
    doLogin() {
      if (!this.LoginuserEmail.trim() && !this.LoginuserPwd.trim()) {
        return;
      }
      let params = `email=${this.LoginuserEmail}&pwd=${this.LoginuserPwd}`;
      this.axios.post("/user/login", params).then((res) => {
        if (res.data.code == 200) {
          // 登陆成功
          // console.log(res);
          localStorage.setItem("token", res.data.token);
          sessionStorage.setItem("UserID",res.data.user_id)
          this.show = false;
          this.UpdateName(this.LoginuserEmail)
          // location.reload()
        } else {
          alert(res.data.msg);
        }
      });
    },
    myDetail() {
      this.$router.push("/mydetail");
    },
    Login() {
      this.show = !this.show;
    },
    reg() {
      this.test = !this.test;
      // console.log(this.userEmail);
    },
    // 测试token
    testToken(){
      this.show = !this.show;
      }
  },
  computed: {
   ...mapState(['Uname'])
  },
};
</script>
<style src="../assets/css/commentlogin.css" scoped></style>
<style src="../assets/css/header.css" scoped></style>
<style lang="scss" scoped>
.header{
  width: 1920px !important;
}
</style>
